<template>
    <BasicLayout>
        <template #wrapper>
            <el-card class="box-card">
                <el-form
                    ref="queryForm"
                    :model="queryParams"
                    :inline="true"
                    label-width="78px"
                >
                    <el-form-item label="新闻分类">
                        <el-select
                            v-model="queryParams.category_id"
                            placeholder="请选择分类"
                        >
                            <el-option
                                v-for="item in typeList"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否发布">
                        <el-select
                            v-model="queryParams.status"
                            placeholder="请选择分类"
                        >
                            <el-option
                                v-for="item in statusList"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否推荐">
                        <el-select
                            v-model="queryParams.recommend"
                            placeholder="请选择分类"
                        >
                            <el-option
                                v-for="item in recoList"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                            />
                        </el-select>
                    </el-form-item>
                    <!--          <el-form-item label="时间排序">-->
                    <!--            <el-select v-model="queryParams.sort" placeholder="请选择分类">-->
                    <!--              <el-option-->
                    <!--                v-for="item in sortList"-->
                    <!--                :key="item.key"-->
                    <!--                :label="item.value"-->
                    <!--                :value="item.key">-->
                    <!--              </el-option>-->
                    <!--            </el-select>-->
                    <!--          </el-form-item>-->
                    <el-form-item>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="handleQuery"
                        >
                            搜索
                        </el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="addHandler"
                        >
                            新增
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="listData" border>
                    <el-table-column label="新闻ID" prop="id" />
                    <el-table-column
                        label="新闻标题"
                        prop="title"
                        width="400px"
                    />
                    <el-table-column label="新闻封面">
                        <template v-slot="scope">
                            <img :src="scope.row.cover" class="cover_img" />
                        </template>
                    </el-table-column>
                    <el-table-column label="新闻分类">
                        <template v-slot="scope">
                            {{ cateGoryMap[scope.row.categoryId] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否发布">
                        <template v-slot="scope">
                            {{ statusMap[scope.row.status] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否推荐">
                        <template v-slot="scope">
                            {{ recoMap[scope.row.recommend] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="修改时间" prop="updatedAt" />
                    <el-table-column label="操作">
                        <template v-slot="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="detailHandler(scope.row.id)"
                            >
                                编辑
                            </el-button>
                            <el-button
                                type="text"
                                size="small"
                                @click="deleteHandler(scope.row.id)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.page"
                    v-model:limit="queryParams.page_size"
                    @pagination="getList"
                />
            </el-card>
        </template>
    </BasicLayout>
</template>

<script>
import { getNewsList, deleteNews } from '@/api/admin/news-api';

export default {
    name: 'NewsList',
    data() {
        return {
            total: 0,
            loading: false,
            cateGoryMap: {
                1: '新闻',
                2: '活动',
                3: '赛事',
                4: '公告',
                5: '综合',
            },
            statusMap: {
                1: '发布',
                2: '不发布',
            },
            recoMap: {
                1: '推荐',
                2: '不推荐',
            },
            typeList: [
                { key: 0, value: '所有' },
                { key: 1, value: '新闻' },
                { key: 2, value: '活动' },
                { key: 3, value: '赛事' },
                { key: 4, value: '公告' },
                { key: 5, value: '综合' },
            ],
            statusList: [
                { key: 0, value: '所有' },
                { key: 1, value: '发布' },
                { key: 2, value: '不发布' },
            ],
            recoList: [
                { key: 0, value: '所有' },
                { key: 1, value: '推荐' },
                { key: 2, value: '不推荐' },
            ],
            sortList: [
                { key: 'asc', value: '由近及远' },
                { key: 'desc', value: '由远及近' },
            ],
            // 数据
            listData: [],

            queryParams: {
                page: 1,
                page_size: 10,
                category_id: 0, // 分类id 1 2 3 4 5
                status: 0, // 1 2
                recommend: 0, // 1 2
                sort_field: '',
                sort: 'desc',
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            const params = this.queryParams;
            getNewsList(params)
                .then((res) => {
                    const { list = [], total } = res.message;
                    this.listData = list;
                    this.total = +total;
                })
                .catch((e) => {
                    console.log('get list error ', e);
                });
        },

        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },

        addHandler() {
            this.$router.push('/admin/news/add_news');
        },

        detailHandler(id) {
            this.$router.push({
                path: '/admin/news/news_detail',
                query: { id: id },
            });
        },

        deleteHandler(id) {
            deleteNews({ id })
                .then((res) => {
                    console.log('@@@@ delete news res @@@@', res);
                    if (res.code == 200) {
                        this.$message.success('删除成功');
                        this.getList();
                    }
                })
                .catch((e) => {
                    console.log('@@@@ delete news error @@@@', e);
                });
        },
    },
};
</script>

<style scoped>
.logo-img {
    width: 200px;
    height: auto;
}

.cover_img {
    width: 100px;
    height: 50px;
}
</style>
